Vue.component("vws", {
    // 自定义vue组件的属性 => 操作属性与数据模型一致
    props:["msgs", "users", "prefix"],
    data(){
        return {
            vws: null,
            localMsg: []
        }
    },
    methods:{
        login(uid, vid){
            if (!uid) {
                this.$alert("请输入用户的id")
                return
            }
            this.vws = new WebSocket(this.prefix + "vws/"+ vid + "/" +uid);

            // 接受消息的时候调用的方法
            this.vws.onmessage = data=>{
                let obj = JSON.parse(data.data)
                console.log(obj.onlines)
                if(obj.onlines){
                    this.users = obj.onlines
                    console.log(this.users)
                    this.$emit("update:users", this.users)
                }
                // if(obj.content != "上线了" && obj.content != "下线了"){
                    console.log("this.msgs",this.msgs)
                    this.localMsg.push({
                        author:obj.author,
                        content:obj.content,
                        time: obj.time,
                        onlineNum: obj.onlineNum
                    });
                // }
                console.log("localMsg",this.localMsg)
                this.$emit("update:msgs", [...this.localMsg])
            }
        },
        send(text){
            if (!text || !this.vws) {
                return;
            }
            this.vws.send(text);
        }
    }
})